<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 系统设置
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container" :style="isPc ?'padding:30px': 'padding:10px'">


        <div class="handle-box" >

                <el-form ref="form" :model="form" :label-width="isPc ? '150px' : '70px'" style="width: 80%">
                    <el-form-item label="系统名称">
                        <el-input v-model="form.shop_name"></el-input>
                    </el-form-item>
                    <el-form-item label="店铺电话">
                        <el-input v-model="form.shop_mobile"></el-input>
                    </el-form-item>
                    <el-form-item label="店铺地址">
                        <el-input v-model="form.shop_address"></el-input>
                    </el-form-item>
                    <el-form-item label="公众号Token">
                        <el-input v-model="form.wx_token"></el-input>
                    </el-form-item>
                    <el-form-item label="公众号AppId">
                        <el-input v-model="form.wx_app_id"></el-input>
                    </el-form-item>
                    <el-form-item label="公众号AppSecret">
                        <el-input v-model="form.wx_app_secret"></el-input>
                    </el-form-item>
                    <el-form-item label="商户号Id">
                        <el-input v-model="form.wx_mch_id"></el-input>
                    </el-form-item>
                    <el-form-item label="商户号密码">
                        <el-input v-model="form.wx_pay_secret"></el-input>
                    </el-form-item>
                    <el-form-item label="七牛云Secret">
                        <el-input v-model="form.qiniu_access"></el-input>
                    </el-form-item>
                    <el-form-item label="七牛云Secret">
                        <el-input v-model="form.qiniu_secret"></el-input>
                    </el-form-item>
                    <el-form-item label="七牛云Url">
                        <el-input v-model="form.qiniu_uri"></el-input>
                    </el-form-item>
                    <el-form-item label="七牛云Bucket">
                        <el-input v-model="form.qiniu_bucket"></el-input>
                    </el-form-item>
                    <el-form-item label="小程序AppId">
                        <el-input v-model="form.mp_app_id"></el-input>
                    </el-form-item>
                    <el-form-item label="小程序Secret">
                        <el-input v-model="form.mp_app_secret"></el-input>
                    </el-form-item>
                    <el-form-item label="分享标题">
                        <el-input v-model="form.share_title"></el-input>
                    </el-form-item>
                    <el-form-item label="分享描述">
                        <el-input v-model="form.share_desc"></el-input>
                    </el-form-item>
                    <el-form-item label="分享佣金比例">
                        <el-input v-model="form.share_ratio"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">保存修改</el-button>
                        <el-button>取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script>


export default {
    name: 'goods',
    data() {
        return {
            form: {
                shop_name: '',
                shop_mobile: '',
                shop_address: '',
                wx_token: '',
                wx_app_id: '',
                wx_app_secret: '',
                wx_mch_id: '',
                wx_pay_secret: '',
                qiniu_access: '',
                qiniu_secret: '',
                qiniu_uri: '',
                qiniu_bucket: '',
                mp_app_id: '',
                mp_app_secret: '',
                share_title: '',
                share_desc: '',
                share_ratio: '',
            },
            isPc: false

        };
    },
    created() {
        if (document.body.clientWidth > 768) {
          this.isPc = true
        }
        this.getData();
    },
    activated(){
    },
    mounted(){
    },
    methods: {
        // 获取 easy-mock 的模拟数据
        getData() {
            this.http.getConfs().then(res => {
                let map = []
                res.data.forEach(item => {
                    map[item.cnf_key] = item.cnf_val;
                })
                for (let k in this.form){
                    this.form[k] = map[k]
                }
            });
        },

        onSubmit(){
            this.http.editConf(this.form).then(res => {
                this.$message.success("保存成功")
            })
        }
    }
};
</script>

<style scoped>
.el-row {
    margin-bottom: 20px;
    background-color: #fff;
}
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.add-dialog-input {
    margin-right: 10px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
.date-input{
    margin-right: 10px;
    width: 150px;
}
</style>
